<template>
  <div class="search">
      <!-- Nav板块 -->
      <van-nav-bar title="商品搜索" left-arrow border @click-left="onClickLeft"/>
      <van-search autofocus="true"  v-model="value" shape="round" show-action  placeholder="请输入搜索关键词" >
  <template #action>
    <div @click="goSearch(value)" class="searchBtn">搜索</div>
  </template>
</van-search>
  <!-- 搜索历史 -->
<div v-if="someThing.length !==0">
   <div class="center">
    <van-icon @click="del" class="icon" name="delete-o" size="25" />
    <div class="text">最近搜索</div>
  </div>
  <div class="someThing">
    <div v-for=" item in someThing" :key="item" class="st" @click="goSearch(item)">{{item}}</div>
  </div>
</div>
  </div>
</template>

<script>
import { getHistory, setHistory, removeHistory } from '@/utils/storage'
export default {
  name: 'SearchIndex',
  created () {
  },
  data () {
    return {
      value: '', // 搜索框的值
      someThing: getHistory()// 历史记录
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    goSearch (value) {
      if (value === '') {
        alert('搜索不能为空')
        return
      }
      if (this.someThing.includes(value)) {
        this.someThing = this.someThing.filter(item => item !== value)
      }
      this.someThing.unshift(value)
      setHistory(this.someThing)

      // 跳转到搜索列表页
      this.$router.push(`/searchlist?search=${value}`)
    },
    del () {
      this.someThing = []
      removeHistory()
    }
  }
}
</script>

<style lang="less" scoped>
@search-background-color:#ffffff;
.searchBtn{
  width: 80px;
  text-align: center;
  background-color: #ff3403;
  color: white;
  border-radius: 0 5px 5px 0 ;
}
.center{
  padding: 10px;
  .icon{
    float: right;
  }
  .text{
    float: left;
    color: #908f8d;
    margin-top: 10px;
  }
}
.center:after {
content: '.';
display: block;
clear: both;
overflow: hidden;
height: 0;
}
.someThing{
  padding-left: 15px;
  .st{
    float: left;
    margin: 0 15px 15px 0;
    width:100px;
    height: 30px;
    background-color: #f7f8fa;
    border-radius: 20px;
    text-align: center;
    line-height: 30px;
}
.st:active{
  color: #ff3403;
}
}
</style>
